<template>
  <el-dialog v-loading="loading" :append-to-body="true" :close-on-click-modal="false" :visible.sync="visable" :title="isAdd ? '新增请假申请' : '编辑请假申请'" width="820px" top="6vh" @close="closeDlg">
    <el-form ref="xform" v-enter2tab="true" :model="form" :rules="rules" size="small" label-width="120px">
      <el-row>
        <el-row>
          <el-col :span="24">
            <el-form-item label="申请标题" prop="applyName">
              <el-input v-model="form.applyName" maxlength="250" autocomplete="off" />
            </el-form-item>
          </el-col>
        </el-row>
        <el-col :span="12">
          <el-form-item label="请假人" prop="name">
            <el-input v-model="name" disabled />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="假期类型" prop="type">
            <el-select v-model="form.type">
              <el-option
                v-for="item in typeOptions"
                :key="item.code"
                :label="item.name"
                :value="item.code"
              />
            </el-select>
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col>
          <el-form-item label="请假原因" prop="reason">
            <el-input v-model="form.reason" type="textarea" maxlength="250" autocomplete="off" rows="4" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="开始时间" prop="startTime">
            <el-date-picker v-model="form.startTime" type="datetime" />
          </el-form-item>
        </el-col>
        <el-col :span="12">
          <el-form-item label="结束时间" prop="endTime">
            <el-date-picker v-model="form.endTime" type="datetime" />
          </el-form-item>
        </el-col>
      </el-row>
      <el-row>
        <el-col :span="12">
          <el-form-item label="请假天数" prop="totalDays">
            <el-input v-model="form.totalDays" maxlength="6" style="width:160px;" autocomplete="off">
              <template slot="append">天</template>
            </el-input>
          </el-form-item>
        </el-col>
      </el-row>
    </el-form>
    <div slot="footer" class="dialog-footer">
      <el-button type="text" @click="cancel">取消</el-button>
      <el-button type="primary" @click="doSubmit">确认</el-button>
    </div>
  </el-dialog>
</template>

<script>
import { mapGetters } from 'vuex'
import request from '@/utils/request'
import { nonnegativeDecimal } from '@/utils/validator.js'
export default {
  name: 'LeaveForm',
  data() {
    return {
      isAdd: false,
      loading: false,
      visable: false,
      typeOptions: [],
      form: this.initForm(),
      rules: {
        type: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        applyName: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        reason: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        startTime: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        endTime: [
          { required: true, message: '必填', trigger: 'blur' }
        ],
        totalDays: [
          { required: true, message: '必填', trigger: 'blur' },
          { validator: nonnegativeDecimal(2), trigger: 'blur' }
        ]
      }
    }
  },
  computed: {
    ...mapGetters([
      'name'
    ])
  },
  created() {
    this.getTypeOptions()
  },
  methods: {
    getTypeOptions() {
      request({ url: '/sys/dirtionary/getDirtionaryItems', params: { dirtionary: 'HTT' }, method: 'get' })
        .then(data => {
          this.typeOptions = data
        })
    },
    initForm() {
      return {
        id: null,
        type: '',
        name: '',
        reason: '',
        startTime: '',
        endTime: '',
        totalDays: ''
      }
    },
    resetFields() {
      this.$refs['xform'].resetFields()
      this.form = this.initForm()
    },
    cancel() {
      this.closeDlg()
    },
    doSubmit() {
      this.$refs['xform'].validate((valid) => {
        if (valid) {
          this.loading = true
          if (this.isAdd) {
            this.doAdd()
          } else this.doEdit()
        }
      })
    },
    add() {
      this.isAdd = true
      this.visable = true
    },
    edit(id) {
      request({ url: '/edu/leave/' + id, method: 'get' }).then(data => {
        this.form = data
        this.isAdd = false
        this.visable = true
      }).catch(err => {
        this.$message.error(err.message)
      })
    },
    doAdd() {
      request({ url: '/edu/leave/apply', method: 'post', data: this.form }).then(res => {
        this.closeDlg()
        this.$notify({
          title: '添加成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.getList() // refrsh
      }).catch(err => {
        this.loading = false
        this.$message.error('新增错误！' + err.message)
      })
    },
    doEdit() {
      request({ url: '/edu/leave', method: 'put', data: this.form }).then(res => {
        this.closeDlg()
        this.$notify({
          title: '修改成功',
          type: 'success',
          duration: 2500
        })
        this.loading = false
        this.$parent.getList()
      }).catch(err => {
        this.loading = false
        this.$message.error('修改错误！' + err.message)
      })
    },
    closeDlg() {
      this.visable = false
      this.resetFields()
    }
  }
}
</script>
